import { FC, Fragment, useState } from 'react';
import { Modal, Form, Upload, Input, message } from 'antd';
import { UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import CaptureFrame from '@/components/captureFrame/index';

import './index.less';

interface IProps {
  isShowUploadWin: boolean;
  close: () => void;
}

const Title: FC = () => {
  return (
    <div>
      <UploadOutlined />
      &nbsp;
      <span>视频上传</span>
    </div>
  );
};

const Footer: FC = () => {
  return <div></div>;
};

const UploadComp: FC<IProps> = (props) => {
  const { isShowUploadWin, close } = props;
  const [loading, setLoading] = useState<boolean>(false);
  const [file, setFile] = useState<any>(); //视频文件

  const [form] = Form.useForm(); //表单
  const uploadProp: UploadProps = {
    name: 'file',
    maxCount: 1,
    // action: ``,
    headers: {},
    customRequest: () => {},
    beforeUpload: (file) => {
      const isPNG = file.type === 'video/mp4';
      if (!isPNG) {
        message.error(`${file.name} 不是MP4文件`);
      }
      return isPNG || Upload.LIST_IGNORE;
    },
    progress: {
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068',
      },
      size: 3,
      format: (percent) => percent && `上传进度：${parseFloat(percent.toFixed(2))}%`,
    },
    onChange(info) {
      console.log('upload-onchange', info);
      if (info.file && info.fileList.length) {
        setFile(info.file.originFileObj);
      } else {
        console.log('not file');
        setFile('');
      }
    },
  };

  const uploadButton = (
    <button style={{ background: 'none' }} type="button" className="upload-btn">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>选择视频</div>
    </button>
  );

  const submit = () => {
    const data = form.getFieldsValue();
    console.log('submit', data);
  };

  return (
    <Fragment>
      <Modal width={600} open={isShowUploadWin} onOk={submit} cancelText={`关闭`} okText={`确认上传`} onCancel={close} title={<Title></Title>}>
        <Form form={form}>
          <Form.Item label="视频标题" name="title" valuePropName="title">
            <Input />
          </Form.Item>
          <Form.Item label="视频描述" name="description" valuePropName="description">
            <Input />
          </Form.Item>
          <Form.Item name="videoPath" valuePropName="videoPath">
            <Upload {...uploadProp}>{uploadButton}</Upload>
          </Form.Item>
          <Form.Item label="视频封面" name="coverPath" valuePropName="coverPath">
            <CaptureFrame videoFile={file}></CaptureFrame>
          </Form.Item>
        </Form>
      </Modal>
    </Fragment>
  );
};

export default UploadComp;
